<template>
  <div class="home-container">
    <div class="scroll-list-wrap">
      <cube-scroll
        ref="scroll"
        :data="items"
        :options="options"
        :scrollEvents = "['scroll']"
        @scroll="onScrollHandle"
        @pulling-up="onPullingUp"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      count: 0,
      items: [1, 2, 3, 4, 5, 6, 7, 8, 9, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
    }
  },
  computed: {
    options() {
      return {
        pullUpLoad: {
          threshold: parseInt(0),
          txt: {
            more: 'Load more',
            noMore: 'No more data'
          }
        },
        scrollbar: true
      }
    }
  },
  methods: {
    handleClick() {
      this.$router.push('/test');
    },
    handleCountClick() {
      this.count += 1;
    },
    onScrollHandle(pos) {
      this.pullDownY = pos.y;
      // console.log(pos.y)
      // console.log('滚动')
    },
    onPullingUp() {
      console.log('上拉')
      // 模拟更新数据
      setTimeout(() => {
        if (Math.random() > 0.5) {
          // 如果有新数据
          this.items.push(120)
        } else {
          // 如果没有新数据
          this.$refs.scroll.forceUpdate()
        }
      }, 1000)
    },
  }
}
</script>

<style lang="scss" scoped>
  @import "@css/style.scss";
  .home-container {
    width: 100%;
    height: 100%;
    background: $bgColor;
    overflow-y: auto;
    &-content {
      height: 100%;
      .activity-520 {
        margin-top: px2rem(-8);
        border-top-left-radius: px2rem(8);
        border-top-right-radius: px2rem(8);
        img {
          display: inline-block;
          width: 33.33%;
        }
      }
      .activity-pin-gou-jie {
        background: #fff;
        margin-top: $marginSize;
        img {
          width: 100%;
          height: auto;
        }
      }
    }
    .scroll-list-wrap {
      height: 100%;
    }
  }
</style>
